// 需要渲染的节点
const renderTbody = document.querySelector('.renderTbody')

// 默认属性 常量
const YOU = '邰子默'
const ALL_PEOPLE = ''

// 默认属性 变量
var rank = 1
var keyword = ''
var user = '邰子默'
var editform_date = ''
var editform_name = ''
var editform_user = ''
var editId = 0
var checkedRowId = []

// 初始化user属性
const lis = document.querySelectorAll('#li')
for (let i = 0; i < lis.length; i++) {
    const element = lis[i];
    if (element.classList.contains('actived')) {
        if (i == 0) {
            user = YOU
        } else {
            user = ALL_PEOPLE
        }
    }
}

// 定义全局变量
var list = []

// 首次渲染节点
handleSearch()

function render(node, data) {
    const toggleAllNode = document.querySelector('#toggleAll')
    toggleAllNode.checked = false
    let innerHTML = ''
    for (let i = 0; i < data.length; i++) {
        const element = data[i]
        innerHTML += `
            <tr style="color:#eee;">
                <th>
                    <input class="form-check-input" type="checkbox" value="" id="toggleOne" onclick="toggleOne(event, ${i})">
                </th>
                <th scope="row">${i + 1}</th>
                <td>${element.date}</td>
                <td>${element.name}</td>
                <td>${user ? 'You' : element.user}</td>
                <td class="opions">
                    <span class="d-inline-block text-light px-2 rounded bg-info " data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight" onclick="handleEdit(${i})">编辑</span>
                    <span class="d-inline-block text-light px-2 rounded bg-danger " onclick="handleDelete(${i})">删除</span>
                </td>
            </tr>
        `
    }
    node.innerHTML = innerHTML
}

const handleToggle = (event, rankNum) => {
    const node = event.target
    const parentNodeChildren = node.parentNode.children
    for (let i = 0; i < parentNodeChildren.length; i++) {
        const element = parentNodeChildren[i];
        element.classList.remove('actived')
    }
    node.classList.add('actived')
    rank = parseInt(rankNum)
    handleSearch()
}

const handleInput = (key, event) => {
    const value = event.target.value
    if (key == 'keyword') {
        keyword = value
    }
    if (key == 'editform_name') {
        editform_name = value
    }
    if (key == 'editform_user') {
        editform_user = value
    }
}

const handleChange = (key, event) => {
    const value = event.target.value
    if (key == 'editform_date') {
        editform_date = value
    }
}

function handleSearch() {
    list = dataSource.filter(item => item.user.includes(user) && item.rank == rank && item.name.includes(keyword))
    render(renderTbody, list)
}

const handleReset = () => {
    let res = JSON.parse(JSON.stringify(list))
    render(renderTbody, res)
}

const toggleAll = (event) => {
    const value = event.target.checked
    const toggleOnes = document.querySelectorAll('#toggleOne')
    if(value){
        checkedRowId = list.map(item=>item.id)
    }else{
        checkedRowId = []
    }
    // console.log(value);
    for (let i = 0; i < toggleOnes.length; i++) {
        const element = toggleOnes[i];
        element.checked = value
    }
}

const toggleOne = (event, index) => {
    const value = event.target.checked
    const toggleAllNode = document.querySelector('#toggleAll')
    if (value) {
        checkedRowId.push(list[index].id)
        const toggleOnes = document.querySelectorAll('#toggleOne')
        let isAllTrue = true
        for (let i = 0; i < toggleOnes.length; i++) {
            const element = toggleOnes[i];
            if (!element.checked) {
                isAllTrue = false
                break
            }
        }
        toggleAllNode.checked = isAllTrue
    } else {
        const i = checkedRowId.findIndex(item => item == list[index].id)
        checkedRowId.splice(i, 1)
        toggleAllNode.checked = value
    }

}

const handleChangeUser = (index) => {
    if (index == 0) {
        setData('user', YOU)
    } else if (index == 1) {
        setData('user', ALL_PEOPLE)
    }
    for (let i = 0; i < lis.length; i++) {
        const element = lis[i];
        element.classList.remove('actived')
    }
    lis[index].classList.add('actived')
    handleSearch()
}

const setData = (key, value) => {
    if (key == 'user') {
        user = value
    }
    if (key == 'keyword') {
        keyword = value
    }
}

const handleEdit = (index) => {
    editId = list[index].id
    const exampleFormControlInput1 = document.getElementById('exampleFormControlInput1')
    const exampleFormControlInput2 = document.getElementById('exampleFormControlInput2')
    const exampleFormControlInput3 = document.getElementById('exampleFormControlInput3')
    exampleFormControlInput1.value = list[index].date
    exampleFormControlInput2.value = list[index].name
    exampleFormControlInput3.value = list[index].user
    editform_date = list[index].date
    editform_name = list[index].name
    editform_user = list[index].user
}

const handleDelete = (index) => {
    list.splice(index, 1)
    render(renderTbody, list)
}

const handleSubmit = () => {
    const id = editId
    const index = list.findIndex(item => item.id == id)
    list[index].date = editform_date
    list[index].name = editform_name
    list[index].user = editform_user
    render(renderTbody, list)
}

const handleDeleteAll = () => {
    if (!checkedRowId.length) {
        showToast('请先选中项!')
    }
    let res = list.filter(item => !checkedRowId.includes(item.id))
    render(renderTbody, res)
}